<template>
  <div class="container">
    <el-card class="left-card" style="width: 20%">
      <template #header>
        <svg-icon icon-class="menu" />
        品类信息管理
        <el-button @click="showOneDetail" type="text"> 添加一级品类</el-button>
      </template>
      <Category ref="categoryRef" @category-click="handleCategoryClick" />
    </el-card>
    <el-card class="right-card" style="width: 80%">
      <template #header>
        <svg-icon icon-class="menu" />
        品类详情信息
      </template>
      <Attribute ref="attributeRef" :category="clickCategoryRow" />
    </el-card>

    <!-- 添加或修改对话框 -->
    <!-- <el-dialog :title="title" v-model="open" width="400px" append-to-body>
      <el-form ref="form" :model="form"  label-width="130px"> -->
    <el-dialog
 
      v-model="open"
      title="添加一级分类"
      width="800px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="品类名称" prop="name">
          <el-input type="text" v-model="form.name" />
        </el-form-item>
        <el-form-item label="品类状态" prop="status">
          <el-input type="text" v-model="form.status" />
        </el-form-item>
        <el-form-item label="显示顺序" prop="num">
          <el-input type="text" v-model="form.num" />
        </el-form-item>
        <el-form-item label="品类说明" prop="memo">
          <el-input type="text" v-model="form.memo" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button v-if="isDetail" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup  name="Post" >

import {
  listGenre,
  getGenre,
  delGenre,
  addGenre,
  updateGenre,
} from "@/api/product/genre.js";
import Category from './compenents/Category.vue';
import Attribute from './compenents/Attribute.vue';


const { proxy } = getCurrentInstance();
const clickCategoryRow = ref(false);
const title = ref(false);
const isDetail = ref(false);
const open = ref(false);


const data = reactive({
  form: {
    genreId: null,
    name: "",
    status: "",
    num: "",
    createTime: "",
    updateTime: "",
  },
  rules: {
    name: [{required: true, message: "品类名称不能为空", trigger: "blur"}],
    status: [{required: true, message: "状态不能为空", trigger: "blur"}],
    num: [{required: true, message: "顺序不能为空", trigger: "blur"}],
  }

});

const {  form, rules } = toRefs(data);

function handleCategoryClick(categoryRow) {
  if (categoryRow) {
    console.log(categoryRow.genreId);
    console.log("babab");
    clickCategoryRow.value = categoryRow;
  }
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["form"].validate((valid) => {
    if (valid) {
      if (form.value.genreId != undefined) {
        updateGenre(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          // getList();
        });
      } else {
        addGenre(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          // getList();
        });
      }
    }
  });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
  isDetail.value = true;
}
/** 表单重置 */
function reset() {
  form.value = {
    genreId: null,
    name: "",
    status: "",
    num: "",
    createTime: "",
    updateTime: "",
  };
  proxy.resetForm("form");
}

function showOneDetail(categoryRow) {
  if (categoryRow) {
    console.log(categoryRow.genreId);
    console.log("babab");
    open.value = true;
    isDetail.value = true;
    title.value = "添加一级分类";
  }
}
</script>

<style scoped>
.container {
  display: flex;
}

.left-card,
.right-card {
  margin: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.left-card {
  flex: 1;
  min-height: 800px;
}

.right-card {
  flex: 4;
  min-height: 800px;
}
</style>
